// 演示
<template>
  <div class="common-layout" style="height: 600px">
    <el-container style="height: 600px">
      <el-aside style="padding-top: 10px; display: flex; flex-direction: column">
        <el-row style="margin: 10px">
          <span style="margin-right: 10px; text-align: left">Grid Type:</span>
          <el-select
            v-model="gridType"
            placeholder="Select"
            size="large"
            style="width: 160px"
            @change="changeGridType"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-row>
        <el-row>
          <div class="slider-demo-block" style="width: 300px">
            <span style="margin: 10px">Grid Size:</span>
            <el-slider
              v-model="gridSizeValue"
              :min="1"
              :max="20"
              :show-tooltip="false"
              size="small"
              style="width: 200px"
              @change="gridSizeChange"
              show-input
            />
          </div>
        </el-row>
        <el-row>
          <div class="demo-color-block" style="width: 300px">
            <span class="demonstration">Grid color:</span>
            <el-color-picker v-model="gridColor" @change="gridColorChange" />
          </div>
        </el-row>
        <el-row>
          <div class="slider-demo-block" style="width: 300px">
            <span style="margin: 10px">Thickness:</span>
            <el-slider
              v-model="gridThicknessValue"
              :step="0.5"
              :min="0.5"
              :max="10"
              :show-tooltip="false"
              size="small"
              style="width: 200px"
              @change="gridThicknessChange"
              show-input
            />
          </div>
        </el-row>
        <el-row>
          <el-col :span="24"><div class="grid-content ep-bg-purple-dark" /></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col>
          <el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col>
        </el-row>
      </el-aside>
      <el-main style="height: 600px">
        <div id="container"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri, Shape } from "@antv/x6";
import { onMounted, ref } from "vue";

const gridType = ref("dot");
const gridSizeValue = ref("");
const gridColor = ref("#eee7e7");
const gridThicknessValue = ref("");

const options = [
  {
    value: "dot",
    label: "Dot",
  },
  {
    value: "fixedDot",
    label: "Fixed Dot",
  },
  {
    value: "mesh",
    label: "Mesh",
  },
  // 暂时不实现，
  // {
  //   value: "doubleMesh",
  //   label: "Double Mesh",
  // },
];

let graph = null;

const changeGridType = (value: string) => {
  changeDrawProp();
};

const gridSizeChange = (value: number) => {
  graph.setGridSize(value);
};

const gridColorChange = (value: string) => {
  changeDrawProp();
};

const gridThicknessChange = (value: string) => {
  changeDrawProp();
};

const changeDrawProp = () => {
  graph.drawGrid({
    type: gridType.value,
    args: {
      color: gridColor.value,
      thickness: gridThicknessValue.value,     // 网格线宽度/网格点大小
    },
  })
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    grid: true, // 网格大小 10px，并绘制网格
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [
      {
        id: "node1",
        shape: "rect",
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: "hello",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
      {
        id: "node2",
        shape: "rect",
        x: 160,
        y: 180,
        width: 100,
        height: 40,
        label: "world",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
    ],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>

<style scoped>
@import "../../assets/elementPlusDemo.css";
</style>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
}
</style>
